<template>
<!-- 订单详情 -->
	<view class="orderForm">
		<!-- 第一个盒子 -->
		<view class="info-one">
			<view class="one-title">
				<text>{{orderStatusName}}</text>
				<u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
			</view>
			<view class="one-infos">
				<view class="one-captcha">
					<text class="left">取药地址</text>
					<text class="right">{{data.storeAddress}}</text>
				</view>
				<view class="one-captcha">
					<text class="left">取药码</text>
					<text class="right textColor">{{data.pickupCode}}</text>
				</view>
				<view class="one-captcha">
					<text class="left">联系人</text>
					<text class="right">{{data.contactUser}}</text>
				</view>
				<view class="one-captcha">
					<text class="left">联系电话</text>
					<text class="right">{{data.contactTel}}</text>
				</view>
			</view>
		</view>
		<!-- 第二个盒子 -->
		<view class="info-two">
			<view class="two-top">
				<view class="two-top-left">
					<text class="left">用药信息</text>
					<u-icon name="question-circle" color="#CCC" size="28"></u-icon>
				</view>
				<view class="two-top-right">
					<text class="right">未填写</text>
					<u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
				</view>
			</view>
			<view class="two-bottom">
				<text>据国家规定，此购药清单包含处方药，需填写用药信息</text>
			</view>
		</view>
		<!-- 第三个盒子 -->
		<view class="info-three">
			<view class="info-center">
				<view class="three-title">
					<text>订单商品({{itemsList.length}})</text>
				</view>
				<view class="three-reduction">
					<!-- <text class="t1">满减</text>
					<text class="t2">满10盒，可减1盒；满10盒，可减1盒</text> -->
					<!-- <view class="act" v-if="item.activityType !== 999">
						<tag  type="act" :activityType="item.activityType"/>
						<text class="u-m-l-16 u-main-color u-font-24">
							<actCartDescription  :type="item.activityType" :nowActivity="item.activityRule" />
						</text>
					</view>
					<view class="act u-main-color"  v-if="item.activityType == 999">
						普通商品
					</view> -->
				</view>
				
				<u-read-more ref="uReadMore" text-indent="0" :toggle="true"  show-height="600"  color="#666666" close-text="加载更多" :shadow-style="shadowStyle">
					<u-parse :html="content" @load="parseLoaded" >
						<view v-for="(v,i) in itemsList" :key="i">
							<goods :goods="v"/>
						</view>
					</u-parse>
				</u-read-more>
				<view class="three-preferential" v-if="data.activityAmount>0 || data.activityAmount>0">
					<view class="preferential-promote" v-if="data.activityAmount>0">
						<text class="t1 u-main-color">促销</text> 
						<text class="t2 u-font-bold">-¥{{data.activityAmount}}</text>
					</view>
					<view class="preferential-ticket" v-if="data.activityAmount>0">
						<text class="t1 u-main-color">优惠券</text>
						<text class="t2 u-font-bold">-¥{{data.couponAmount}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 第四个盒子 -->
		<view class="four-money">
			<view class="four-economize" v-if="data.discountAmount>0">
				<text class="t1">共节省</text>
				<text class="t2">¥{{data.discountAmount}}</text>
			</view>
			<view class="four-statistics u-font-bold">
				<text class="t1">实付金额：</text>
				<text class="t2">¥{{data.orderAmount}}</text>
			</view>
		</view>
		<!-- 第五个盒子 -->
		<view class="five-information">
			<view class="five-title">
				订单信息
			</view>
			<view class="five-center">
				<view class="five-number">
					<text class="t1 u-tips-color">订单编号</text>
					<text class="t2 u-main-color">{{data.orderSn}}</text>
					<text class="t3"  @click="copyText">复制</text>
				</view>
				<view class="five-number">
					<text class="t1 u-tips-color">下单时间</text>
					<text class="t2 u-main-color">{{data.orderDate}}</text>
				</view>
				<view class="five-number">
					<text class="t1 u-tips-color">支付方式</text>
					<text class="t2 u-main-color">{{payTypeName}}</text>
				</view>
				<view class="five-number">
					<text class="t1 u-tips-color">订单备注</text>
					<text class="t2 u-main-color">{{data.orderMessage}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions, mapState, mapMutations } from 'vuex';
	import tag from '@/components/activity/tag.vue'
	import goods from "./components/goods.vue"
	import actCartDescription from '@/components/activity/actCartDescripe.vue'
	export default {
		components:{ tag, actCartDescription, goods },
		data() {
			return {
				condition:{},
				data:{},
				itemsList:[],
				content:'',
				shadowStyle: {
					backgroundImage: "none",
					borderRadius: "16rpx",
					paddingTop: "22rpx",
					marginTop: "22rpx",
					backgroundColor:"#F6F6F6",
				}
			}
		},
		onLoad(options){
			this.condition = options
			this.init()
		},
		computed:{
			...mapState({
				payTypeList: state => state.shop.payTypeList
			}),
			payTypeName(){
				let payTypeName = ''
				this.payTypeList.forEach((item,index)=>{
					if(item.dictValue==this.data.payType){
						payTypeName = item.dictName
					}
				})
				return payTypeName
			},
			orderStatusName(){
				switch(this.data.orderStatus){
					case 2:
					return '患者待取药'
					case 4:
					return '已完成'
					case 9:
					return '已取消'
				}
			}
		},
		methods:{
			...mapActions(['ActOrderDetail', 'ActItemsListByOrderId', 'ActGetAppDictList']),
			 copyText () {
					// #ifdef H5
					this.$copyText(this.data.orderSn).then(
							res => {
									uni.showToast({
											title: '复制成功'
									})
							}
					)
					// #endif
					// #ifndef H5
					uni.setClipboardData({
							data: this.data.orderSn,
							success: () => {
									uni.showToast({
											title: '复制成功'
									})
							}
					})
					// #endif
			},
			async init(){
				const res1 = await this.ActOrderDetail(this.condition)
				if(res1.success){
					this.data = res1.data
				}else{
					uni.showModal({
						title: '提示',
						content: res1.msg,
						showCancel:false
					})
				}
				const res2 = await this.ActItemsListByOrderId(this.condition)
				if(res2.success){
					this.itemsList = res2.data
				}else{
					uni.showModal({
						title: '提示',
						content: res2.msg,
						showCancel:false
					})
				}
				// 获取支付方式字典
				await this.ActGetAppDictList({
					dictType:'pay_type',
					isCtr:'0'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderForm{
		padding: 0 24rpx;
		background-color: #F6F6F6;
		padding-bottom: 260rpx;
		// 第一个盒子
		.info-one{
			background-color: #FFF;
			border-radius: 16rpx;
			padding-bottom: 32rpx;
			margin-top: 24rpx;
			.one-title{
				padding-top: 48rpx;
				text-align: center;
				font-size: 34rpx;
				font-weight: 600;
				text{
					margin-right: 8rpx;
					}
			}
			.one-infos{
				&>view {
					display: flex;
					padding-top: 24rpx;
				}
				.left {
					font-size: 26rpx;
					width: 180rpx;
					padding-left: 24rpx;
				}
				.right {
					font-size: 26rpx;
					padding-right: 24rpx;
					text-align: left;
				}
				.textColor{
					color: #FF4F39;
				}
			}
		}
		// 第二个盒子
		.info-two{
			margin-top: 16rpx;
			height: 146rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			.two-top{
				padding-top: 24rpx;
				display: flex;
				justify-content:space-between;
				.two-top-left{
					margin-left: 24rpx;
					.left{
						font-weight: 600;
						font-size: 28rpx;
						margin-right: 12rpx;
						color: #333333;
					}
				}
				.two-top-right{
					color: #FF4F39;
					margin-right: 24rpx;
					.right{
						margin-right: 8rpx;
					}
				}
			}
			.two-bottom{
				padding-top: 24rpx;
				text{
					margin-left: 24rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
		// 第三个盒子
		.info-three{
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			.info-center{
					padding:24rpx;
				.three-title{
					padding-bottom: 24rpx;
					color: #333333;
					font-size: 28rpx;
					font-weight: 600;
					border-bottom: 1px solid #F6F6F6;
				}
				.three-reduction{
					padding-top:24rpx;
					font-size: 24rpx;
					color: #333333;
					.t1{
						margin-right: 24rpx;
						padding: 0 8rpx;
						background:linear-gradient(left,#F16500,#FF0000)
					}
				}
				.three-loading{
					.loading-button{
						border: none;
						background-color: #F6F6F6;
						.loading-down{
							margin-left: 8rpx;
						}
					}
				}
				.three-preferential{
					margin-bottom: 10rpx;
					padding-top: 24rpx;
					.preferential-promote{
						display: flex;
						justify-content: space-between;
						.t1{
							font-size: 26rpx;
						}
						.t2{
							color: $u-type-error;
							font-size: 28rpx;
						}
					}
					.preferential-ticket{
						padding-top: 28rpx;
						display: flex;
						justify-content: space-between;
						.t1{
							font-size: 26rpx;
						}
						.t2{
							color: $u-type-error;
							font-size: 28rpx;
						}
					}
				}

			}
		}
		// 第四个盒子
		.four-money{
			margin-top: 2rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			padding: 36rpx 0 32rpx 0;
			font-size: 26rpx;
			.four-economize{
				margin-left: 260rpx;
				display: inline-block;
				.t2{
					padding-left: 4rpx;
					color: #FF4F39;
				}
			}
			.four-statistics{
				margin-left: 22rpx;
				display: inline-block;
				.t2{
					padding-left: 4rpx;
					color: #FF4F39;
				}
			}
		}
		// 第五个盒子
		.five-information{
			margin-top: 24rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			padding-bottom: 24rpx;
			.five-title{
				font-size: 28rpx;
				font-weight:600;
				padding: 24px 0 0 24rpx;
				}
			.five-center{
				padding: 0 24rpx;
				font-size: 26rpx;
				.five-number{
					padding-top:24rpx;
					.t2{
						padding-left: 32rpx;
					}
					.t3{
						border: 2rpx solid #F6F6F6;
						float: right;
						padding: 0 16rpx;
					}
				}
			}
		}

	}
</style>